<script setup>
import request from "@/utils/request";
import {SwipeCell,Cell,Button,Tag} from "vant";
import {ref} from "vue";
import {deleteItem, updateStatus} from '@/v-api/addNews'
import { Local } from "@/utils/storage";
import router from "@/router";
const userInfo = Local.get('userInfo')
const item = ref()
const items = {
  schoolId: 1,
  authorId: userInfo.userId,
  status: 1,
};
request.post('news/edit',items)
    .then(response => {
      item.value = response.data;
      console.log(item.value)
    })
    .catch(error => {
      console.error(error);
    });
</script>

<template>
  <div class="list">
    <SwipeCell v-for="(item, index) in item" :key="index" class="bg_container">
      <div class="container">
        <div class="title">{{ item.title }}
          <span>
            <Tag v-if="item.type === 0" type="success" size="large">通知</Tag>
            <Tag v-else-if="item.type === 1" type="primary" size="large">公告</Tag>
            <Tag v-else-if="item.type === 2" type="warning" size="large">新闻</Tag>
          </span>
        </div>
        <div class="content">{{ item.content }}</div>
      </div>
      <template #left>
        <van-button square text="删除" icon="delete" class="delete-button" color="#7232dd" plain @click="deleteItem(item.id)"/>
        <van-button square text="发布" icon="smile-comment" class="delete-button" color="#7232dd" plain @click="updateStatus(item.id,2,1)"/>
        <van-button square text="编辑" icon="comment" class="delete-button" color="#7232dd" plain @click="router.push({ name:'finish', params: { title: item.title,content:item.content,id:item.id,status:1 }})"/>
      </template>
    </SwipeCell>
  </div>
</template>

<style scoped>
.list {
  height: 680px; /* 设置高度为页面可视区域的100% */
  overflow-y: scroll; /* 设置垂直方向的滚动条 */
  background-color: #d3e8d3; /* 设置背景颜色 */
}
.bg_container{
  margin: 15px;
}
.container {
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 修改阴影颜色为黑色 */
  background-color: white;
  height: 120px; /* 调整容器高度，增加了阴影下方的空间 */
  width: 300px;
  margin-bottom: 20px; /* 添加与阴影同样的间距 */
  border: 1px solid black
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px; /* 添加标题和内容之间的间距 */
}

.content {
  font-size: 16px;
}
.delete-button{
  height: 100%;
  margin-right: 10px;
}
</style>